<template>
	<div class="footer-container">
		<div v-html="footerContent"></div>
		<!-- <router-link to=""></router-link> -->
	</div>
</template>

<script>
	export default {
		name: "Foot",
		data() {
			return {
				footerContent: `
                <div class="header1"></div>
                <div class="footer">
                    <div class="content">
                        <div class="c1">
                            <strong><a href="#/AppAboutUs.vue">关于我们</a></strong>
                            <li><a href="#/EnteroriseService.vue">企业服务</a></li>
                            <li><a href="#/Cooperate.vue">商务合作</a></li>
                            <li><a href="#/ContactUs.vue">联系我们</a></li>
                            <li><a href="#/CommonProblem.vue">常见问题</a></li>
                        </div>
                        <div class="c2">
                            <strong>友情链接</strong>
                            <li><a href="http://www.people.com.cn/">人民网</a></li>
                            <li><a href="http://www.news.cn/">新华网</a></li>
                            <li><a href="https://www.cctv.com/">央视网</a></li>
                            <li><a href="https://www.southcn.com/">南方网</a></li>
                        </div>
                        <div class="c3">
                            <strong>媒体矩阵</strong>
                            <li><a href="https://weibo.com">微博</a></li>
                            <li><a href="www.douyin.com">抖音</a></li>
                            <li><a href="https://www.xiaohongshu.com">小红书</a></li>
                            <li><a href="https://www.toutiao.com/">今日头条</a></li>
                        </div>
                    </div>
                    <p align="center">Copyright &#169; 校园循环利用宝-校园二手交易平台2024V1.0</p>
                </div>
            `
			};
		}
	}
</script>

<style>
	body {
		font-family: Arial, sans-serif;

	}

	.header1 {
		background-color: #66b1ff;
		padding: 20px;
		color: white;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.footer {
		background-color: #4f4f4f;
		color: white;
		text-align: center;
		padding: 10px;
	}

	li {
		list-style-type: none;
		line-height: 2;
	}

	strong {
		line-height: 2;
	}

	p {
		line-height: 2;
	}

	a {
		color: white;
		text-decoration: none;
	}

	a:hover {
		color: darkgray;
	}
</style>